<template>
    <div id="JZW">
        <div class="tools">
            <el-tooltip class="box-item" effect="dark" content="添加" placement="left">
                <el-button class="mbtn" :icon="Plus" @click="addnewjzw()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="选择" placement="left">
                <el-button class="mbtn" :icon="Pointer" @click="villagechoose()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="删除" placement="left">
                <el-button class="mbtn" :icon="Delete" @click="m_del()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="编辑" placement="left">
                <el-button class="mbtn" :icon="Edit" @click="modify()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="建筑物信息" placement="left">
                <el-button class="mbtn" :icon="Operation" @click="jzwmessage()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="放大" placement="left">
                <el-button class="mbtn" :icon="ZoomIn" @click="zoomin()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="缩小" placement="left">
                <el-button class="mbtn" :icon="ZoomOut" @click="zoomout()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="刷新" placement="left">
                <el-button class="mbtn" :icon="Refresh" @click="m_re()"></el-button>
            </el-tooltip>
        </div>
        <div class="map" id="map"></div>
        <div class="cleardialog area">
            <el-dialog draggable class="mfloat" title="建筑物" v-model="xzlistshow" :modal="false"
                :close-on-click-modal="false" :show-close="false">
                <div class="listcon" style="padding: 10px;">
                    <el-table :data="xzlist" border height="450">
                        <el-table-column type="index" label="序号" width="60" align="center" />
                        <el-table-column prop="name" label="村(居)委会名称" />
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button style="margin-right: 10px;" size="small"
                                    @click="getJZW(scope.row.code)">加载</el-button>
                                <!-- <el-button size="small" @click="aimcwh(scope.row)">定位</el-button> -->
                            </template>
                        </el-table-column>

                    </el-table>
                    <!-- <el-radio-group v-model="selecode" class="ml-4">
                        <el-radio v-for="(item, index) in xzlist" @change="getJZW()" :value="item.code" size="large">
                            {{ item.name }}
                        </el-radio>
                    </el-radio-group> -->
                </div>
            </el-dialog>
        </div>
        <div class="cleardialog">
            <el-dialog draggable class="mfloat-r" v-model="jzwlistshow" width="300" :modal="false"
                :close-on-click-modal="false">
                <div class="sjxian">
                    <i class="sij_xian_01"></i>
                    <i class="sij_xian_02"></i>
                    <i class="sij_xian_03"></i>
                    <i class="sij_xian_04"></i>
                    <i class="sij_xian_05"></i>
                    <i class="sij_xian_06"></i>
                    <i class="sij_xian_07"></i>
                    <i class="sij_xian_08"></i>
                </div>
                <el-table :data="jzwlist" style="width: 100%">
                    <el-table-column type="index" label="序号" />
                    <el-table-column label="名称">
                        <template #default="scope">
                            <div @click="poi(scope.row)">
                                {{ scope.row.buildname }}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </div>
        <el-button @click="showjzwlist">{{ jzwnum }}</el-button>
        <el-dialog draggable v-model="infoshow" width="500" :lock-scroll="false" :modal="false"
            :close-on-click-modal="false">
            <div class="sjxian">
                <i class="sij_xian_01"></i>
                <i class="sij_xian_02"></i>
                <i class="sij_xian_03"></i>
                <i class="sij_xian_04"></i>
                <i class="sij_xian_05"></i>
                <i class="sij_xian_06"></i>
                <i class="sij_xian_07"></i>
                <i class="sij_xian_08"></i>
            </div>
            <el-form :model="infoform" label-width="auto">
                <el-form-item label="建筑编号">
                    <el-input v-model="infoform.sortid" readonly />
                </el-form-item>
                <el-form-item label="建筑名称">
                    <el-input v-model="infoform.buildname" />
                </el-form-item>
                <el-form-item label="小区编号">
                    <el-input v-model="infoform.xqcode" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="infoshow = false" style="margin-right: 10px;">取消</el-button>
                    <el-button type="primary" @click="changeJZWinfo()">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <div class="m_footer">
            <div style="display: flex;justify-content: space-between;align-items: center;height: 38px;font-size: 14px;">
                <div style="display: flex;justify-content: flex-start;">
                    <div style="margin-right: 20px;">区划名称：{{ localname }}</div>
                    <div>区划编码：{{ localcode }}</div>
                </div>
                <div>
                    坐标：
                    {{ Number($store.curlon).toFixed(5) }}，
                    {{ Number($store.curlat).toFixed(5) }}
                    比例尺：
                    <span v-show="Number($store.scale) > 1">
                        1:{{ Number($store.scale).toFixed(0) * 1000 }}
                    </span>
                    <span v-show="Number($store.scale) < 1">
                        1:{{ Number($store.scale * 10).toFixed(0) * 100 }}
                    </span>
                </div>
                <div>建设单位：河南省统计局</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref, onUnmounted, setTransitionHooks } from "vue";
import $mapreq from "../../api/mapreq";
import { Plus, Pointer, Delete, Edit, Operation, ZoomIn, ZoomOut, Refresh } from '@element-plus/icons-vue';
import { init, unloadMap, aimPoint, jzwPOLYGON, drawaddvillage, clearJZW, addvillage, villagechoose, villagedel, jzwmodify, aimWKT, zoomin, zoomout, mapreset, makehole } from '../../utils/mapjs/map';
import { dataStore } from "../../store/data";

const $store = dataStore();
const xzlistshow = ref(true);
const xzlist = ref([]);
const selecode = ref('');
const localname = ref(localStorage.getItem('qhinfo'));
const localcode = ref(localStorage.getItem('code'));
onMounted(() => {
    getXzList();
    getAimpoint();
    init();
});
onUnmounted(() => {
    unloadMap();
})
function modify() {
    ElMessage({
        message: '拖动便捷进行编辑!',
        type: 'success'
    })
    jzwmodify()
}
function addnewjzw() {
    ElMessage({
        message: '单击绘制区域,双击结束绘制!',
        type: 'success'
    })
    drawaddvillage(selecode.value)
}
const AimPoint = ref([]);
function getAimpoint() {
    $mapreq.getVillagePoint().then(res => {
        if (res.code == 200) {
            AimPoint.value = res.data;
        }
    })
}
const xzcode = ref('');
const infoshow = ref(false);
const infoform = ref({});
function CheckInfo() {
    let flag = false;
    if (infoform.value.buildname == '' || !infoform.value.buildname) {
        ElMessage({
            message: '建筑物名称不能为空!',
            type: 'error'
        });
        flag = false;
    } else if (infoform.value.xqcode == '' || !infoform.value.xqcode) {
        ElMessage({
            message: '小区编号不能为空!',
            type: 'error'
        });
        flag = false;
    } else {
        flag = true;
    }
    return flag;
}
function changeJZWinfo() {
    if (CheckInfo()) {
        ElMessageBox.confirm(
            '确定修改该条信息吗?',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            $mapreq.updateJZWInfo(infoform.value).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        message: '操作成功!',
                        type: 'success'
                    });
                    infoshow.value = false;
                }
            });
        }).catch(() => {
        });
    }
}
function jzwmessage() {
    if (villagedel().length < 1) {
        ElMessage({
            message: '请选择一个对象!',
            type: 'warning'
        });
    } else if (villagedel().length != 1) {
        ElMessage({
            message: '仅可选择一个对象!',
            type: 'warning'
        });
    } else {
        let gid = villagedel()[0].values_.gid;
        $mapreq.getJZWInfo(gid).then(res => {
            if (res.code == 200) {
                infoform.value = res.data;
                infoshow.value = true;
            }
        });
    }
}
function f_makehole() {
    if (villagedel().length < 1) {
        ElMessage({
            message: '请选择一个对象!',
            type: 'warning'
        });
    } else if (villagedel().length != 1) {
        ElMessage({
            message: '仅可选择一个对象!',
            type: 'warning'
        });
    } else {
        makehole();
    }
}
function m_del() {
    if (villagedel().length < 1) {
        ElMessage({
            message: '请选择一个区域',
            type: 'warning'
        });
    } else if (villagedel().length != 1) {
        ElMessage({
            message: '一次仅可删除一个绘制区域',
            type: 'warning'
        });
    } else {
        ElMessageBox.confirm(
            '确定执行操作?',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            let gid = villagedel()[0].values_.gid;
            $mapreq.delJZW(gid).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        message: '操作成功!',
                        type: 'success',
                    });
                    m_re();
                }
            });
        }).catch(() => {

        });
    }
}

function getJZW(code) {
    localStorage.setItem('jzwlscode', code);
    AimPoint.value.forEach((item, index) => {
        if (item.code == code) {
            aimPoint(item.geom);
        }
    })
    mapreset();
    // getXQlist();
    getJZWlist();
}
function m_re() {
    mapreset();
    // getXQlist();
    getJZWlist();
}
function getXQlist() {
    $mapreq.JZWxzcXQlist(selecode.value).then(res => {
        if (res.code == 200) {
            if (res.data.length == 0) {
                return;
            } else {
                jzwPOLYGON(res.data);
            }
        }
    });
}
const jzwnum = ref(0);
const jzwlist = ref([]);
const jzwlistshow = ref(false);
function showjzwlist() {
    jzwlistshow.value = true;
}
function poi(e) {
    aimWKT(e.geom);
}
function getJZWlist() {
    selecode.value=localStorage.getItem('jzwlscode');
    $mapreq.JZWxzcJZWlist(selecode.value).then(res => {
        if (res.code == 200) {
            jzwnum.value = res.data.length;
            jzwlist.value = res.data;
            res.data.forEach((item, index) => {
                addvillage(item.buildname, item.geom, item.gid);
            });
        }
    });
}
function getXzList() {
    $mapreq.JZWxzclist().then(res => {
        if (res.code == 200) {
            xzlist.value = res.data;
        }
    });
}
</script>

<style lang="less">
#JZW {
    position: relative;
    height: 100%;

    .m_footer {
        position: fixed;
        z-index: 99999;
        bottom: 0;
        color: white;
        background-color: rgba(0, 0, 0, .8);
        padding: 0 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .listcon {
        max-height: 500px;
        overflow-y: scroll;
        color: black;
        // padding-left: 20px;
        height: 500px;
    }

    ::-webkit-scrollbar {

        background-color: #ccc;
        width: 0px;
        border-radius: 500px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 500px;
    }

    .tools {
        position: absolute;
        display: flex;
        width: 50px;
        justify-content: flex-start;
        flex-wrap: wrap;
        top: 20px;
        right: 10px;
        z-index: 99999;

        .mbtn {
            width: 20px;
            margin-top: 10px;

            .el-icon {
                color: #133C7E;
            }
        }
    }

    .el-button+.el-button {
        margin-left: 0 !important;
    }

    .el-radio.el-radio--large {
        height: 30px;
    }

    .mfloat {
        position: fixed;
        left: 30px;
        // background-color: rgba(3, 36, 56, 0.6);
        color: black;
        width: 25%;
        height: auto;
        padding: 0px;
        border-radius: 10px;
    }

    .mfloat-r {
        position: fixed;
        right: 230px;
        background-color: white;
        width: 240px;
        height: auto;
        padding: 10px;
    }

    .area .el-dialog__title {
        display: block;
        color: #fff !important;
        font-size: 16px;
    }

    .el-dialog__headerbtn {
        top: -2px;
    }

    .area .el-dialog__header {
        box-sizing: border-box;
        width: 100%;
        padding: 10px 20px;
        background-color: #133C7E;
        border-radius: 10px 10px 0 0;

        .el-dialog__title {
            color: #fff;
            font-size: 16px;
        }

        .el-icon svg {
            color: #fff;
        }
    }

    .el-overlay-dialog {
        pointer-events: none;
    }

    .el-dialog {
        pointer-events: auto;
    }

    .mdlg {
        position: fixed;
        left: 50%;
        top: 20%;
        transform: translate(-50%, 0);
        background-color: white;

        height: auto;
        padding: 10px;
    }

    .el-overlay-dialog {
        pointer-events: none;
    }

}

#map {
    height: 100%;

    .ol-overlaycontainer-stopevent {
        display: none;
    }

    .ol-zoom-out {
        display: none;
    }

    .ol-zoom-in {
        display: none;
    }
}

.cleardialog>div {
    width: 0;
}

.el-popup-parent--hidden {
    padding-right: 0px !important;
    overflow: hidden !important;
}
</style>
